<template>
  <div class="detail">
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span @click="back"><i class="el-icon-arrow-left"></i></span>
      <span>本小组共有{{list.length}}人，未签到{{signDetail.unSignNum}}人</span>
    </div>
    <div class="content">
      <ul class="head" v-for="(itemPage, indexPage) in page" :key="indexPage" v-show="isShow[indexPage]">
        <li v-for="(item, index) in itemPage" :key="index">
          <div>
            <div><img :src="item.url" alt=""></div>
            <p>{{item.name}}</p>
            <p :class="['item.status' === '已签到' ? 'sign' : 'noSign']">{{item.status}}</p>
            <!-- <p :class="{'sign': 'item.status' == '已签到', 'noSign': 'item.status' == '已签到'}">{{item.status}}</p> -->
            <!-- 为什么不行 -->
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <span @click="left"><i class="el-icon-arrow-left"></i></span>
      <span>{{num}}/{{this.page.length}}</span>
      <span @click="right"><i class="el-icon-arrow-right"></i></span>
    </div>
  </el-card>
  </div>
</template>

<script>
import { showSignDetail } from '@/utils/api/sign'
export default {
  name: '',
  props: {
    sid: {
      type: Number,
      required: true
    }
  },
  components: {},
  data () {
    return {
      list: [],
      page: [],
      num: 1,
      isShow: [true],
      signDetail: null,
    }
  },
  methods: {
    back () {
      this.$router.push('/page/createClock/publish')
    },
    left () {
      if (this.num > 1 && this.num <= this.page.length) {
        this.isShow[this.num - 1] = false
        this.num--
        this.isShow[this.num - 1] = true
      }
    },
    right () {
      if (this.num >= 1 && this.num < this.page.length) {
        this.isShow[this.num - 1] = false
        this.num++
        this.isShow[this.num - 1] = true
      }
    },
    load () {
      showSignDetail(this.sid).then(res => {
        this.signDetail = res.data.data;
        this.list = res.data.data.infoList
        const count = Math.floor(this.list.length / 16)
        if (count * 16 < this.list.length) {
          for (let i = 0; i <= count; i++) {
            if (i !== count) {
              this.page.push(this.list.slice(i * 16, (i + 1) * 16))
            } else {
              this.page.push(this.list.slice(i * 16, this.list.length))
            }
          }
        } else {
          for (let i = 0; i < count; i++) {
            this.page.push(this.list.slice(i * 16, (i + 1) * 16))
          }
        }
        for (let i = 1; i < this.page.length; i++) {
          this.isShow.push(false)
        }
      })
    }
  },
  created () {
    this.load()
  }
}
</script>

<style lang='less' scoped>
  .detail{
    margin-top: 30px;
  }
  .el-card{
    height: 500px;
    position: relative;
  }
  .clearfix{
    position: relative;
    :nth-child(1){
      font-size: 30px;
      line-height: 30px;
      position: absolute;
      top: -3px;
      color: #9b9898;
      font-weight: 600;
      cursor: pointer;
    }
    :nth-child(2){
      display: inline-block;
      margin-left: 50px;
    }
  }
  .head{
    width: 80%;
    margin: 15px auto;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li{
      display: inline-block;
      list-style-type: none;
      flex: 0 0 12.5%;
      margin: 20px 0;
      >div{
        // position: relative;
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        :nth-child(1){
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgb(255, 200, 127);
        }
        :nth-child(2){
          text-align: center;
        }
        :nth-child(3){
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
  .foot{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    user-select: none;
    :nth-child(1),:nth-child(3){
      color: #9b9898;
      cursor: pointer;
      font-weight: 700;
    }
    :nth-child(2){
      font-weight: 300;
    }
  }
  .sign{
    background-color: rgba(120, 243, 120, 0.561);
    padding: 5px;
    border-radius: 20px;
  }
  .noSign{
    padding: 5px;
    border-radius: 20px;
    background-color: rgba(255, 0, 0, 0.363);
  }
</style>
